import React from "react";
import { ScrollView, View, Text, StyleSheet } from "react-native";
import { Tabs } from "@ant-design/react-native";

const renderContent = (tab, index) => {
  const style = {
    paddingVertical: 20,
    justifyContent: "center",
    alignItems: "center",
    margin: 10,
    backgroundColor: "#ddd"
  };

  const content = [1, 2, 3, 4, 5, 6, 7, 8].map(i => {
    return (
      <View key={`${index}_${i}`} style={style}>
        <Text>
          {tab.title}内容 - {i}
        </Text>
      </View>
    );
  });

  return (
    <ScrollView
      style={{ backgroundColor: "#fff" }}
      automaticallyAdjustContentInsets={false}
      showsHorizontalScrollIndicator={false}
      showsVerticalScrollIndicator={false}
    >
      {content}
    </ScrollView>
  );
};

export default class DataScreen extends React.Component {
  static navigationOptions = {
    title: "上报数据"
  };

  render() {
    const tabs2 = [
      { title: "终端" },
      { title: "通话" },
      { title: "短信" },
      { title: "网页" },
      { title: "微信" },
      { title: "QQ" },
      { title: "邮件" }
    ];
    const style = {
      alignItems: "center",
      justifyContent: "center",
      height: 150,
      backgroundColor: "#fff"
    };
    return (
      <View style={{ flex: 1 }}>
        <View style={{ flex: 2 }}>
          <Tabs tabs={tabs2} initialPage={0} tabBarPosition="top">
            {renderContent}
          </Tabs>
        </View>
      </View>
    );
  }
}

export const title = "Tabs";
export const description = "Tabs example";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff"
  }
});
